<template>
	<view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" indicator-color="rgba(255,255,255,0.6)" circular indicator-dots autoplay
				:interval="interval" :duration="duration" indicator-active-color="rgba(27,167,132,0.8)">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<view class="swiper-item uni-bg-red">
						<img :src="item.picUrl">
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息 -->
		<view class="shangping">
			<!-- <view class="shangping-zhong"> -->
			<text class="shangping-zhongl">/////</text>
			<text class="shangping-zhongzhong">商品信息</text>
			<text class="shangping-zhongl">\\\\\</text>
			<!-- </view> -->
		</view>

		<!-- 下面内容 -->
		<view class="xbigbox">


			<view class="xiabox floatl" v-for="item in goodsList" :key="item.id">
				<view class="libox" @click="fn(item.id)">
					<!-- 里面图片 -->
					<view class="libox-img">
						<image :src="item.pic"></image>
					</view>
					<!-- 里面文字 -->
					<view class="libox-wz">{{item.name}}</view>
					<!-- 里面价格 -->
					<view class="libox-jiage">
						<view class="libox-jiage-jg floatl">
							<text>￥{{item.minPrice}}</text>
							<text class="libox-jiage-jgyj">￥{{item.originalPrice}}</text>
						</view>
						<button class="libox-jiage-goumai floatr">购买</button>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		_banner
	} from "../../api/home.js"
	import {
		_goods
	} from "../../api/home.js"
	export default {
		data() {
			return {
				interval: 2000,
				duration: 1000,
				bannerList: [],
				goodsList: []
			}
		},
		methods: {
			getBannerList() {
				_banner().then(res => {
					// console.log(res)
					if (res.code === 0) {
						this.bannerList = res.data
					}
				})
			},
			getGoodsList() {
				_goods().then(res => {
					// console.log(res)
					if (res.code === 0) {
						this.goodsList = res.data.result
					}
				})
			},
			fn(id){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+id
				})
			}
		},
		onReady() {
			this.getBannerList()
			this.getGoodsList()
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;
		background-color: black;
	}

	.swiper {
		height: 360rpx;
	}

	.swiper-item {
		display: block;
		height: 360rpx;
		line-height: 360rpx;
		text-align: center;
	}

	img {
		width: 100%;
		height: 100%;
	}

	/* 商品信息 */
	.shangping {
		width: 100%;
		height: 100rpx;
		text-align: center;
		/* display: flex; */
		align-items: center;
	}

	/* .shangping-zhong{
		width: 100%;
		text-align: center;
	} */

	.shangping-zhongl {
		margin: 0 20rpx;
	}

	.shangping-zhongzhong {
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
	}

	/* 下面内容 */
	.xbigbox {
		background-color: #ebedf0;
	}

	.floatl {
		float: left;
	}

	.floatr {
		float: right;

	}

	.xiabox {
		width: 50%;
		height: 513rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		padding-right: 10rpx;
		/* padding-bottom: 10rpx; */
		background-color: #ebedf0;
	}

	.libox {
		width: 100%;
		height: 493rpx;
		box-sizing: border-box;
		background-color: white;
		border-radius: 5%;
	}

	/* 里面图片 */
	.libox-img {
		width: 100%;
		height: 344rpx;
		background-color: #f7f8fa;
		border-radius: 5%;
	}

	.libox-img>image {
		width: 100%;
		height: 100%;
		border-radius: 5% 5% 0% 0%;
	}

	/* 里面文字 */
	.libox-wz {
		height: 72rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 25rpx;
		overflow: hidden;

	}

	/* 优价格 */
	.libox-jiage {
		height: 60rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		overflow: hidden;
		font-size: 12rpx;
	}

	/* 原本价格 */
	.libox-jiage-jg {
		color: #1ba784;
		font-size: 35rpx;
		height: 49rpx;
		display: flex;
		align-items: center;
	}
	.libox-jiage-jgyj {
		font-size: 20rpx;
		color: #969799;
		text-decoration: line-through;
	}

	/* 购买 */
	.libox-jiage-goumai {
		width: 120rpx;
		height: 60rpx;
		font-size: 20rpx;
		color: #1ba784;
		border: 1rpx solid #1ba784;
		margin-right: 10rpx;
	}






	#red {
		background-color: red;
	}

	#blue {
		background-color: blue;
	}
</style>
